<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .table {
            width: 600px;
            margin: 50px auto;
        }

        .item {
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: burlywood;
        }

        .item input {
            width: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="table">
            <div class="tr">
                <div class="item">
                    <input type="checkbox" :checked="checkedAll" @change="setCheckedAll">全选
                </div>
                <div class="item">
                    商品名称
                </div>
                <div class="item">
                    商品价格
                </div>
                <div class="item">
                    商品数量
                </div>
                <div class="item">
                    商品小计
                </div>
                <div class="item">
                    操作
                </div>
            </div>

            <div class="tr" v-for="item in list">
                <div class="item">
                    <input type="checkbox" v-model="item.checked">
                </div>
                <div class="item">
                    {{item.goodsname}}
                </div>
                <div class="item">
                    {{(item.goodsprice*1).toFixed(2)}}
                </div>
                <div class="item">
                    <button v-show="item.goodsnum>1" @click="calc(item,-1)">-</button>
                    <input :value="item.goodsnum" />
                    <button @click="calc(item,1)">+</button>
                    <!-- item是一个对象 对象是引用类型 -->
                </div>
                <div class="item">
                    {{item.goodsnum*item.goodsprice}}
                </div>
                <div class="item" @click="delById(item.id)">
                    删除
                </div>
            </div>

            <div class="tr">
                <div class="item" @click="delAll">
                   批量删除
                </div>
                <div class="item">
                    
                </div>
                <div class="item">
                   
                </div>
                <div class="item">
                    {{num}}
                </div>
                <div class="item">
                    {{price}}
                </div>
                <div class="item">
                    
                </div>
            </div>
        </div>

    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            checkedAll:false,
            list: [{ id: 1, goodsname: "商品一", goodsprice: "100", goodsnum: 1, checked: false }, { id: 2, goodsname: "商品二", goodsprice: 200, goodsnum: 2, checked: false }, { id: 3, goodsname: "商品三", goodsprice: 300, goodsnum: 3, checked: false }, { id: 4, goodsname: "商品四", goodsprice: 500, goodsnum: 1, checked: false }],
            price:0,
            num:0
        },
        methods: {
            calc(info, num) {//info就是list中的对象 
                info.goodsnum = info.goodsnum + num; //1+1  3 + (-1);
            },
            delById(id) {//单个删除
                this.list = this.list.filter(item => item.id != id);
            },
            delAll(){//批量删除
                this.list = this.list.filter(item=>!item.checked);//只要没有被选中的
            },
            setCheckedAll(e){//不是v-model 是事件绑定
                // alert(e.target.checked);
                this.list.forEach(item=>{//item是一个对象
                        item.checked = e.target.checked;
                })
            }
        },
        watch:{
            list:{
                deep:true,
                handler(newList){//深度监听 数据的变化
                    //判断全选是否选中
                    this.checkedAll =newList.length? newList.every(item=>item.checked):false;
                    //计算选中的数量

                    let  checkedList = newList.filter(item=>item.checked);
                    //1 找到选中的集合
                    let  numList = checkedList.map(item=>item.goodsnum);
                    //2 找到集合中的数量
                    if(numList.length){
                        this.num  = numList.reduce((a,b)=>a+b);
                    }else{
                        this.num = 0;
                    }
                    //3 求数量的和


                    let  priceList = checkedList.map(item=>item.goodsnum*item.goodsprice);
                    if(priceList.length){
                        this.price = priceList.reduce((a,b)=>a+b);
                    }else{
                        this.price = 0;
                    }
               


                }
            }
        }
    })


</script>

</html>